<template>

	<div class="myteam">
		<div class="template" v-show="Loading">
			<div>
				<mt-spinner :type="3" :size="60"></mt-spinner>
			</div>
		</div>
		<header class="navigation">
			<div @click="retreat"><img src="../assets/rightbut.png"></div>
			<div class="flex main_zdy friend">
				<div v-for="item in friendname" @click="friendon(item.name,item.id)" :class="friendid == item.id?'on' :'friend_d'">{{item.name}}</div>
			</div>
			<div></div>
		</header>
		<div class="find">
			<div class="find_t">
				<img src="../assets/seek.png" />
				<input type="search" placeholder="搜索好友名称或手机号" ref='searchname' />
			</div>
			<div class="find_b flex main_zdy sideAlign_center mainAlign_between">
				<!--<input type="date" ref='startTime'/> - <input type="date" ref='endTime' />-->
				<div class="block">
					<el-date-picker v-model="startTime" type="date" placeholder="开始时间" size='small' value-format="yyyy-MM-dd">
					</el-date-picker>
				</div>
				<div class="block">
					<el-date-picker v-model="endTime" type="date" placeholder="结束时间" size='small' editable="true" value-format="yyyy-MM-dd">
					</el-date-picker>
				</div>
				<div @click="query" class="query">查询</div>
			</div>
		</div>
		<div class="content">

			<div class="contentlist">
				<div class="contentlist_t flex main_zdy mainAlign_around">
					<div>用户名</div>
					<div @click="teamon" :class="team == false?'onn' :'contentlist_t'">团队
						<img src="../assets/order.png" v-if="team == true" />
						<img src="../assets/orders.png" v-if="team == false" />
					</div>
					<div @click="saleon" :class="sale == false?'onn' :'contentlist_t'">当月累计销售
						<img src="../assets/order.png" v-if="sale == true" />
						<img src="../assets/orders.png" v-if="sale == false" />
					</div>
				</div>
				<ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10" class="contentlist_b_ul">
					<div class="contentlist_b flex main_zdy mainAlign_around sideAlign_center" v-for="item in teamlist">
						<div>{{item.userName}}<i v-if='item.role != ""' class="flex sideAlign_center mainAlign_center">{{item.role}}</i></div>
						<div :class="team == false?'onn' :'contentlist_bb'">{{item.teamNum}}</div>
						<div :class="sale == false?'onn' :'contentlist_bb'" @click="statementon(item.url)">{{item.totalSale}}<img src="../assets/pull_down.png" /></div>
					</div>
				</ul>

			</div>

		</div>
		<div class="record" @click="recordon"></div>
	</div>

</template>

<script>
	import { BaseUrl } from '../Baseurl/common.js';
	import { Toast } from 'mint-ui';
	export default {
		data() {
			return {
				token: '',
				teamlist: [],
				Loading: true,
				friendname: [{
					"name": '一级好友',
					"id": 'one'
				}, {
					"name": '二级好友',
					"id": 'two'
				}],
				friendid: 'one',
				loading: '',
				index: 0,
				searchname: '', //搜索名称手机号
				startTime: '', //开始时间
				endTime: '', //结束时间
				height: '',
				team: true,
				teamid: '',
				sale: true,
				sortid: '',
			}
		},
		created() {
			this.token = localStorage.getItem('token');
		},
		methods: {
			//导航退后
			retreat: function() {
				window.history.go(-1);
			},
			//点击好友
			friendon: function(name, id) {
				this.friendid = id;
				this.index = 0;
				this.teamlist = [];
				this.searchname = '';
				this.startTime = '';
				this.endTime = '';
				this.singInfo(this.index);
			},
			//查询
			query: function() {
				this.searchname = this.$refs.searchname.value;
				this.index = 0;
				this.teamlist = [];
				this.singInfo(this.index);
				this.$refs.searchname.value = '';
			},
			//团队排序
			teamon: function() {
				this.sale = true;
				this.team = !this.team;
				this.teamid = 'team';
				if(this.team == true) {
					this.sortid = 'asc';
				} else {
					this.sortid = 'desc';
				}
				this.index = 0;
				this.teamlist = [];
				this.singInfo(this.index);
			},
			//累计排序
			saleon: function() {
				this.team = true;
				this.sale = !this.sale;
				this.teamid = 'sale';
				if(this.sale == true) {
					this.sortid = 'asc';
				} else {
					this.sortid = 'desc';
				}
				this.index = 0;
				this.teamlist = [];
				this.singInfo(this.index);
			},
			//报表明细
			statementon: function(url) {
				window.location.href = url;
			},
			singInfo(index) {
				this.Loading = true;
				var url = BaseUrl + 'users/team/list?appId=wap' + '&token=' + this.token + '&level=' + this.friendid + '&start=' + this.index + '&length=15' + '&startTime=' + this.startTime + '&endTime=' + this.endTime + '&userPhone=' + this.searchname + '&userName=' + this.searchname + '&field=' + this.teamid + '&sort=' + this.sortid;
				this.$http.post(url).then(res => {
					if(res.data.code == '10000') {
						this.Loading = false;
						this.teamlist = this.teamlist.concat(res.data.data.list);
						if(res.data.data.list == "") {
							this.loading = true;
							Toast({
								message: "没有更多数据",
								position: 'middle',
								duration: 3000
							})
							return;
						} else if(res.data.data.list != "") {
							this.loading = false;
							this.index++;
						}
					}
				}).catch(error => {
					this.Loading = false;
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
				})

			},
			loadMore() {
				this.loading = this.loading;
				if(this.loading == false) {
					setTimeout(() => {
						this.singInfo(this.index);
						this.loading = this.loading;
					}, 100);
				}
			},
			//邀请记录
			recordon: function() {
				this.$router.push({
					path: '/teaminviterecord'
				})
			}
		}
	}
</script>

<style scoped="scoped">
	.el-input__prefix {
		display: none!important;
	}
	
	.block {
		width: 1rem;
	}
	
	.myteam {
		width: 100%;
		height: 100%;
		background: #F4F7FA;
		overflow: hidden;
	}
	
	.template {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		position: absolute;
		z-index: 99;
	}
	
	.template div {
		position: absolute;
		top: 5.5rem;
		left: 50%;
		margin-left: -0.6rem;
	}
	
	.navigation {
		height: 1rem;
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 0.24rem;
	}
	
	.navigation img {
		width: 0.2rem;
		height: 0.36rem;
		display: block;
	}
	
	.friend_d {
		padding: 0.15rem 0;
		margin: 0 0.665rem;
		font-family: 'PingFangSC-Medium';
		font-size: 0.3rem;
		color: #303133;
		letter-spacing: 0;
	}
	
	.on {
		padding: 0.15rem 0;
		box-sizing: border-box;
		margin: 0 0.665rem;
		font-family: 'PingFangSC-Medium';
		font-size: 0.3rem;
		color: #FF6742;
		letter-spacing: 0;
		border-bottom: 2px solid #FF6742;
	}
	
	.find {
		background: #FFFFFF;
		box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.12);
		padding: 0.3rem 0;
	}
	
	.find_t {
		padding: 0 0.3rem;
		position: relative;
		margin-bottom: 0.3rem;
	}
	
	.find_t img {
		width: 0.26rem;
		height: 0.26rem;
		position: absolute;
		top: 0.15rem;
		left: 0.5rem;
	}
	
	.find_t input {
		width: 100%;
		height: 0.6rem;
		background: #F4F7FA;
		border-radius: 100px;
		font-family: 'PingFangSC-Regular';
		font-size: 0.24rem;
		color: #8F9399;
		letter-spacing: 0;
		border: none;
		outline: none;
		text-indent: 0.62rem;
		line-height: 0.6rem;
	}
	
	.find_b {
		padding: 0 0.3rem;
	}
	
	.el-date-editor {
		width: 95%!important;
		padding-right: 0!important;
	}
	
	.block {
		width: 90%;
		box-sizing: border-box;
	}
	
	.find_b input {
		width: 2.2rem;
		height: 0.6rem;
		background: #F4F7FA;
		border-radius: 0.08rem;
		outline: none;
		border: none;
	}
	
	.query {
		width: 1.5rem;
		height: 0.6rem;
		font-family: 'PingFangSC-Regular';
		font-size: 0.24rem;
		color: #F87B7A;
		letter-spacing: 0;
		background: #FFFFFF;
		border: 1px solid #F87B7A;
		border-radius: 0.08rem;
		text-align: center;
		line-height: 0.6rem;
	}
	
	.content {
		height: 70%;
		margin: 0.3rem 0.2rem 0 0.2rem;
	}
	
	.contentlist {
		width: 100%;
		height: 100%;
		background: #FFFFFF;
		box-shadow: 0 8px 12px 0 rgba(2, 2, 2, 0.04);
		border-radius: 0.02rem;
		padding: 0 0.3rem;
		box-sizing: border-box;
	}
	
	.contentlist_t {
		height: 0.85rem;
		line-height: 0.85rem;
		text-align: center;
		border-bottom: 1px solid #E3E7EE;
		font-family: 'PingFangSC-Medium';
		font-size: 0.24rem;
		color: #606266;
		letter-spacing: 0;
	}
	
	.contentlist_t img {
		width: 0.18rem;
		height: 0.18rem;
	}
	
	.contentlist_t div:nth-child(1) {
		width: 45%;
		height: 100%;
		text-align: left;
	}
	
	.contentlist_t div:nth-child(2) {
		width: 20%;
		height: 100%;
		border: none;
	}
	
	.contentlist_t div:nth-child(3) {
		width: 35%;
		height: 100%;
		text-align: center;
		border: none;
	}
	
	.contentlist_b_ul {
		height: 90%;
		overflow-y: auto;
	}
	
	.contentlist_b {
		height: 0.85rem;
		text-align: center;
		font-family: 'PingFangSC-Regular';
		font-size: 0.24rem;
		color: #8F9399;
		letter-spacing: 0;
	}
	
	.contentlist_b img {
		width: 0.1rem;
		height: 0.2rem;
		margin-left: 0.2rem;
	}
	
	.contentlist_bb {
		height: 0.85rem;
		line-height: 0.85rem;
		text-align: center;
		font-family: 'PingFangSC-Regular';
		font-size: 0.24rem;
		color: #8F9399;
		letter-spacing: 0;
	}
	
	.contentlist_b i {
		padding: 0.5px 10px;
		display: inline-block;
		font-family: 'PingFangSC-Regular';
		font-size: 0.10rem;
		color: #FFFFFF;
		letter-spacing: 0;
		background: #F87B7A;
		border-radius: 100px;
		text-align: center;
		margin-left: 0.05rem;
		box-sizing: border-box;
		font-style: normal;
	}
	
	.contentlist_b div:nth-child(1) {
		width: 45%;
		text-align: left;
	}
	
	.contentlist_b div:nth-child(2) {
		width: 20%;
	}
	
	.contentlist_b div:nth-child(3) {
		width: 35%;
		text-align: center;
	}
	
	.onn {
		font-family: 'PingFangSC-Regular';
		font-size: 0.24rem;
		color: #FF6742;
		letter-spacing: 0;
	}
	
	input::-webkit-input-placeholder {
		color: #8F9399;
	}
	
	input::-moz-placeholder {
		Mozilla Firefox 19+color: #8F9399;
	}
	
	input:-moz-placeholder {
		/* Mozilla Firefox 4 to 18 */
		color: #8F9399;
	}
	
	input:-ms-input-placeholder {
		/* Internet Explorer 10-11 */
		color: #8F9399;
	}
	
	.record {
		width: 1.24rem;
		height: 1.24rem;
		position: fixed;
		bottom: 0;
		right: 0;
		background-image: url(../assets/record.png);
		background-size: 100% 100%;
	}
</style>